<template>
	<div class="common-main domain clearfix">
		<!-- 搜索 -->
		<div class="container clearfix">
			<div class="crumbs-nav">
				<router-link to="/">首页</router-link>
				<b> > </b>
				<router-link to="/domain">域名</router-link>
				<b> > </b>
				<span>域名查询</span>
			</div>

			<div class="sch-con">
				<div class="sch-box clearfix">
					<div class="tab-nav" id="tab-head">
						<a href="javascript:;" class="active">单选模式</a>
						<span>|</span>
						<a href="javascript:;">多选模式</a>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<router-link to="/priceoverview">价格总览&gt;&gt;</router-link>
					</div>
					<div class="sch-body" id="tab-body">
						<section class="single-mode" id="sectionSingle">
							<!-- 搜索框 -->
							<div class="search-wrap">
								<input style="float: left;width:727px;" type="text" name="domainName" id="singleDomain" value="" placeholder="请输入您想注册的域名" />
								<select name="suffix" id="suffix">

								</select>
								<a id="checkSingle" href="javascript:;">查域名</a>
							</div>
						</section>
						<section class="single-mode hidden" id="sectionMulti">
							<!-- 搜索框 -->

							<div class="search-wrap">
								<input type="text" name="domainName" id="multiDomain" placeholder="请输入您想注册的域名" />
								<input type="hidden" name="suffixOther" id="suffixOther" />
								<a href="javascript:;" id="checkMulti">查域名</a>
								<a href="javascript:void(0);" style="display: none" id="changeMulti">域名查询中</a>
							</div>
							<!-- 多选radio区域 -->
							<div class="multi-suffix">
								<div class="cat-tag">
									<label><input type="radio" id="en_radio" name="multiSufCatTag" value="en" checked="">
                                    英文域名</label>
									<label><input type="radio" id="cn_radio" name="multiSufCatTag" value="zh"> 中文域名</label>
									<label><input type="checkbox" id="all_check" @click="selectAll($event)">全选</label>
								</div>
								<div class="cat-cont" id="enDomain">

								</div>
								<div class="cat-cont" id="zhDomain" style="display: none">

								</div>
							</div>

						</section>
						<!-- 警告提示 -->
						<!--<div class="w-alt w-alt-warning mt10">提示： 您查找过的域名不存在！</div>-->
						<div class="result-box">
							<ul class="rs-list">
								<!-- 最多展示10条信息 -->
							</ul>
							<div class="rs-btm clearfix">
								<!-- 点击显示全部查询结果 -->
								<div class="fl btn-view">
									<a href="javascript:;" class="btn-view-all" id="checkUncheckedSingle">查看全部后缀</a>
								</div>
								<a href="javascript:;" class="btn-add-all fr">全部加入清单 </a>
							</div>
						</div>
					</div>
				</div>

				<!-- 域名推荐 -->
				<div class="sch-box clearfix result-box">
					<a href="javascript:" class="random" style="color: #00a2ca;display: block;text-align: right;">换一批</a>
					<ul id="recDomain">
					</ul>
				</div>

				<!-- banner -->
				<div class="sch-banner clearfix" id="bottomBanner"></div>
				<!-- 企业建站 -->
				<div class="sch-station" style="margin-top: 130px">
					<a href="{url('','site','index')}">企业建站</a>
				</div>
			</div>

			<!-- 右边sidebar -->
			<div class="page-sidebar">
				<!-- 域名清单 -->
				<div class="sider-box domain-cart ">
					<div class="hd clearfix">
						<h3 class="fl tit">域名清单 <span id="rightCartNum" class="txt-orange">(0)</span></h3>
						<a href="javascript:;" class="fr clearAll" id="clearAllCart">清空</a>
					</div>
					<div class="bd">
						<!-- 购物车不为空的结算 -->
						<div class="list list-scroll" id="cart">
							<!--<a href="javascript:;" class="item">liuhuan.top<b class="btn-remove"></b></a>-->
							<!--<a href="javascript:;" class="item">liuhuan.pub<b class="btn-remove"></b></a>-->
						</div>
						<a id="toPay" href="/view/page/order/orderConfirm.html" class="btn-goto J_btnGotoShopping" style="display: none">去结算</a>
						<!-- 购物车为空的情况 -->
						<div id="noneToPay" class="J_cart_empty list list-empty" style="display: block">您还没有选择任何域名哦</div>
					</div>
				</div>

				<!-- 域名小知识 -->
				<div class="sider-box domain-knowledge mt10">
					<div class="hd clearfix">
						<h3 class="fl tit">域名小知识</h3>
					</div>
					<div class="bd">
						<ul class="list" id="domainKnowledge">

						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		methods: {

			//获取推荐域名
			getRecDomain() {
				var keyword = this.getKeyword();
				$("#recDomain").html("");
				$.ajax({
					url: host + "/domain/getRecDomain.do",
					data: {
						"domainName": keyword,
						"num": 6
					},
					dataType: "json",
					success: function(data) {
						$.each(data, function(i, n) {
							var rli = '<li class="fl recDomain" style="width: 50%;">';
							rli += '<div class="fl">';
							rli += '<span class="domainName">' + n.substr(0, n.indexOf(".")) + '</span><b class="suffix">' + n.substr(n.indexOf(".")) + '</b>';
							rli += '<span class="status ">(未注册)</span>';
							rli += '</div>';
							rli += '<div class="fr">';
							rli += '<a href="javascript:void(0);" class="add-list-btn" target="_blank">加入清单</a>';
							rli += '</div>';
							rli += '</li>';
							$("#recDomain").append(rli);
						});
					}
				});
			},
			//域名检索
			checkDomain() {
				$(".rs-list").html("");
				var suf = $("#suffix").val();
				var sufs = $("#suffix option").map(function() {
					return $(this).val();
				}).get();
				var index = sufs.indexOf(suf);
				sufs.splice(index, 1);
				sufs.unshift(suf);
				var singleDomain = $("#singleDomain").val();
				if(!singleDomain) {
					return;
				}
				var reg1 = /\./;
				if(reg1.test(singleDomain)) {
					alert('域名中不能带有点');
					return false;
				}
				getCheck(singleDomain, sufs);
			},

			//通过录入的关键字查询出相关域名信息列表
			getDomainSetting(com) {
				$.ajax({
					url: host + "/setting/queryDomainSetting.do",
					dataType: "json",
					async: false,
					success: function(data) {
						if(data) {
							//点击查看全部后缀要另外拼接的其他后缀
							$("#suffixOther").val(data.suffixOther);
							//域名后缀加载
							if(data.suffix) {
								var suffixs = data.suffix.split(";");
								var option = "";
								for(var index in suffixs) {
									var suffix = suffixs[index];
									if(suffix) {
										if(com == suffix) {
											option += '<option value=.' + suffix + ' selected>.' + suffix + '</option>';
										} else {
											option += '<option value=.' + suffix + '>.' + suffix + '</option>';
										}
									}
								}
								$("#suffix").html(option);
							}
							//域名小知识加载
							if(data.domainKnowledge) {
								var domainKnowledges = data.domainKnowledge;
								var li = "";
								for(var i = 0; i < domainKnowledges.length; i++) {
									var domainKnowledge = domainKnowledges[i];
									li += "<li><a href=''>▪ " + domainKnowledge.name + "</a></li>";
								}
								$("#domainKnowledge").html(li);
							}
							//域名查询-下方宣传
							if(data.bottomBanner) {
								var bottomBanner = data.bottomBanner || '';
								$("#bottomBanner").html(bottomBanner);
							}
							//获取英文域名后缀
							if(data.suffixEn) {
								var suffixEns = data.suffixEn.split(",");
								var labelEn = '';
								for(var i = 0; i < suffixEns.length; i++) {
									var suffixEn = suffixEns[i];
									labelEn += "<label><input type='checkbox' name='multiSufName' value=" + suffixEn + ">" + suffixEn + "</label>";
								}
								$("#enDomain").html(labelEn);
							}
							//获取中文域名后缀
							if(data.suffixZh) {
								var suffixZhs = data.suffixZh.split(",");
								var labelZh = '';
								for(var i = 0; i < suffixZhs.length; i++) {
									var suffixZh = suffixZhs[i];
									labelZh += "<label><input type='checkbox' name='multiSufName' value=" + suffixZh + ">" + suffixZh + "</label>";
								}
								$("#zhDomain").html(labelZh);
							}
						}
					}
				});
			},

			//给‘加入清单’添加事件
			addEventList() {
				$(document).on("click", "a:contains('加入清单')", function() {
					var pre = this.parentNode.previousSibling.firstChild.innerText;
					var suf = this.parentNode.previousSibling.firstChild.nextSibling.innerText;
					var domain = pre + suf;
					var html = '<a href="javascript:void(0);" class="item">';
					html += '<span>' + domain + '</span>';
					html += '<b class="btn-remove"></b>';
					html += '</div>';
					$("#cart").append(html);
					$(this).text("已经加入");
					var cartObj = JSON.parse($.cookie("cartObj"));
					cartObj.domain.push({
						domainName: domain
					});
					cartObj.num++;
					$.cookie('cartObj', JSON.stringify(cartObj), {
						expires: 1,
						path: '/'
					});
					setCartNum(cartObj.num);
					addCartEvent(cartObj);
				});
			},
			//从购物车移除
			addCartEvent() {
				$("#cart a:last-child b").on("click", function() {
					var dom = this.previousSibling.innerText;
					var sign = 1;
					var suf = dom.substr(dom.indexOf('.'));
					var pre = dom.substr(0, dom.indexOf('.'));
					//从购物车移除推荐的域名
					var li = $("#recDomain li");
					$.each(li, function(i, n) {
						var recPre = $(li[i]).children("div.fl").children("span:first").text();
						var recSuf = $(li[i]).children("div.fl").children("b:first").text();
						var recDom = recPre + recSuf;

						if(recDom.trim() == dom && sign == 1) {
							$(li[i]).children("div").last().children("a").text("加入清单");
							sign = 0;
						}
					});
					//从购物车移除域名列表中的域名
					if($("ul.rs-list b:contains('" + suf + "')").text() == suf && $("ul.rs-list li span:first").text() == pre && sign == 1) {
						$("ul.rs-list b:contains('" + suf + "')").parent().next(".fr").children().text("加入清单");
					}
					var cartObj = JSON.parse($.cookie("cartObj"));
					if(cartObj.num > 0) {
						cartObj.num--
					}
					cartObj.domain.pop({
						domainName: dom
					});
					$.cookie('cartObj', JSON.stringify(cartObj), {
						expires: 1,
						path: '/'
					});
					this.setCartNum(cartObj.num);
					this.parentNode.remove();
				});
			},
			addCartEvent2() {
				$("#cart a b").on("click", function() {
					var dom = this.previousSibling.innerText;
					var sign = 1;
					var suf = dom.substr(dom.indexOf('.'));
					//从购物车移除推荐的域名
					var li = $("#recDomain li");
					$.each(li, function(i, n) {
						var recPre = $(li[i]).children("div.fl").children("span:first").text();
						var recSuf = $(li[i]).children("div.fl").children("b:first").text();
						var recDom = recPre + recSuf;

						if(recDom.trim() == dom && sign == 1) {
							$(li[i]).children("div").last().children("a").text("加入清单");
							sign = 0;
						}
					});
					//从购物车移除域名列表中的域名
					if($("ul.rs-list b:contains('" + suf + "')").text() == suf && sign == 1) {
						$("ul.rs-list b:contains('" + suf + "')").parent().next(".fr").children().text("加入清单");
					}
					var cartObj = JSON.parse($.cookie("cartObj"));
					if(cartObj.num > 0) {
						cartObj.num--
					}
					cartObj.domain.pop({
						domainName: dom
					});
					$.cookie('cartObj', JSON.stringify(cartObj), {
						expires: 1,
						path: '/'
					});
					setCartNum(cartObj.num);
					this.parentNode.remove();
				});
			},

			//设置域名商品数量
			setCartNum(num) {
				//转换成整数
				num = parseInt(num);

				//设置域名清单数量
				$('#rightCartNum').html('(' + num + ')');

				//设置侧边购物车数量
				$('#sideCartNum').html(num);

				//是否有商品
				if(num) {
					//显示"去结算"按钮
					$('#toPay').show();

					//隐藏"没有商品去结算"信息
					$('#noneToPay').hide();
				} else {
					//隐藏"去结算"按钮
					$('#toPay').hide();

					//显示 "没有商品去结算"信息
					$('#noneToPay').show();
				}
			},

			//清空购物车事件处理
			clearCart() {
				//更新cookie
				cartObj = JSON.parse($.cookie("cartObj"));
				cartObj = {
					domain: [],
					num: 0
				};
				$.cookie('cartObj', JSON.stringify(cartObj), {
					expires: 1,
					path: '/'
				});
				//刷新购物车表现
				setCartNum(0);
				//清空购物车数据
				$("#cart").html("");
				//允许列表中的域名重新加入
				$.each($('div.result-box .rs-list .add-list-btn,#recDomain .fr .add-list-btn'), function(k, btn) {
					var text = $(btn).text();
					if(text == '已经加入') {
						$(btn).text('加入清单');
					}
				})
			},
			initCart(cookie) {
				var cartObj = JSON.parse(cookie);
				$.each(cartObj.domain, function(k, v) {
					var html = '<a href="javascript:void(0);" class="item">';
					html += '<span>' + v.domainName + '</span>';
					html += '<b class="btn-remove"></b>';
					html += '</div>';
					$("#cart").append(html);
					var li = $("#recDomain li");
					$.each(li, function(i, n) {
						var pre = $(li[i]).children().children().first().html();
						var suf = $(li[i]).children().children("b").text();
						var dom = pre + suf;
						if(dom == v.domainName) {
							$(li[i]).find("a").text("已经加入");
						}
					})
					var li2 = $(".result-box ul.rs-list li");
					$.each(li2, function(i, n) {
						var pre = $(li2[i]).children().first().children().first().text();
						var suf = $(li2[i]).children().first().children("b").text();
						var dom = pre + suf;
						if(dom == v.domainName) {
							$(li2[i]).find("a").text("已经加入");
						}
					});
				});
				this.addCartEvent2();
				this.setCartNum(cartObj.num);
			},
			//根据关键字和后缀，循环check域名
			getCheck(pre, sufs) {
				$(".rs-list").html();
				$.each(sufs, function(k, v) {
					if(v != "") {
						var dom = pre + v;
						$.ajax({
							url: host + "/domain/checkDomain.do",
							data: "domainName=" + dom,
							dataType: "json",
							success: function(data) {
								if(data) {
									if(data.infoDomain) {
										var data = JSON.parse(data.infoDomain);
										var li = "<li class='rs-item'>";
										li += "<div class='fl'>";
										li += "<span class='domainName'>" + pre + "</span>";
										li += "<b class='suffix'>" + v + "</b>";
										if(data.result) {
											li += "<span class='status status-ok'>(未注册)</span>";
											li += "</div>";
											li += "<div class='fr'>";
											li += "<a href='javascript:void(0)' class='add-list-btn' target='_blank'>加入清单</a>";
										} else {
											li += "<span class='status'>(已注册)</span>";
											li += "</div>";
											li += "<div class='fr'>";
											li += "<a href='javascript:void(0)' class='add-list-btn' target='_blank'>查看域名信息</a>";
										}
										li += "</div>";
										li += "</li>";
										$(".rs-list").append(li);
									} else {
										var li = "<li class='rs-item'>";
										li += "<div class='fl'>";
										li += "<span class='domainName'>" + pre + "</span>";
										li += "<b class='suffix'>" + v + "</b>";
										li += "<span class='status'></span>";
										li += "</div>";
										li += "<div class='fr' style='color:red;'>" + data.msg + "</div>";
										li += "</li>";
										$(".rs-list").append(li);
									}
								}
							}
						});
					}
				});
			},
			//查看全部后缀的点击事件
			getOtherSuf() {
				if($('#checkUncheckedSingle').text() == '查看全部后缀') {
					//获取域名
					var domainName = this.getKeyword();
					if(!domainName) {
						alert('请输入要查询的域名');
						return false;
					}
					var reg1 = /\./;
					if(reg1.test(domainName)) {
						alert('域名中不能带有点');
						return false;
					}
					var sufOther = $("#suffixOther").val().split(";");
					//添加第二批后缀
					$.each(sufOther, function(i, v) {
						if(sufOther[i] != "") {
							sufOther[i] = "." + v;
						}
					});
					getCheck(domainName, sufOther);

					//修改按钮标题为收起
					$('#checkUncheckedSingle').text('收起');
				} else {
					//删除第二批要查询的域名
					var cnt;
					var head = document.getElementById("tab-head").getElementsByTagName("a");
					$.each(head, function(i, n) {
						if($(head[i]).text() == "单选模式" && $(head[i]).attr("class") == "active") {
							cnt = suffix.length;
						} else if($(head[i]).text() == "多选模式" && $(head[i]).attr("class") == "active") {
							if($("#en_radio:checked").length) {
								cnt = listChecked("#enDomain", true).length;
							} else {
								cnt = listChecked("#zhDomain", true).length;
							}
						}
					})

					var lis = $('.rs-list li:gt(' + (cnt - 1) + ')');
					lis.remove();
					//修改按钮标题为收起
					$('#checkUncheckedSingle').text('查看全部后缀');
				}
				return false;
			},
			addAll() {
				//本按钮,向上到 显示中的section 向下 到 列表 的 加入清单按钮/或其它按钮
				$.each($('.result-box .add-list-btn'), function(k, btn) {
					var text = $(btn).text();
					if(text == '加入清单') {
						$(btn).click();
					}
				})
			},
			//多选查询按钮的事件
			checkMulti() {
				//域名
				var domainName = $("#multiDomain").val();
				if(!domainName) {
					alert('请输入要查询的域名');
					return false;
				}
				var reg1 = /\./;

				if(reg1.test(domainName)) {
					alert('域名中不能带有点');
					return false;
				}

				//中文域名/英文域名
				var checkLanguage = $("input[name='multiSufCatTag']:checked").attr('id');

				//获取选中的后缀列表
				if(checkLanguage == "cn_radio") {
					//检查域名中是否有中文
					var reg = /[\u4E00-\u9FA5\uF900-\uFA2D]/;
					if(!reg.test(domainName)) {
						alert('至少含有一个中文');
						return false;
					}

					//选中的后缀列表
					checkList = listChecked('#zhDomain', true);
				} else {
					//选中的后缀列表
					checkList = listChecked('#enDomain', true);
				}

				//必须选中后缀
				if(!checkList.length) {
					alert('请选择后缀');
					return false;
				}
				//先清除结果区
				clearResult();

				//添加到结果集中并处理
				getCheck(domainName, checkList);
			},
			//获取多选框选中的值 数组
			listChecked(id, checked) {
				var arr = [];
				if(checked) {
					var items = $(id).find('input[type=checkbox]:checked');
				} else {
					var items = $(id).find('input[type=checkbox]');
				}
				$.each(items, function(k, v) {
					arr.push($(v).val());
				});
				return arr;
			},
			clearResult() {
				$('.result-box .rs-list').html('');
				$('.result-box #recDomain').html('');
				$('.btn-view-all').text('查看全部后缀');
			},
			getKeyword() {
				var keyword;
				var head = document.getElementById("tab-head").getElementsByTagName("a");
				$.each(head, function(i, n) {
					if($(head[i]).text() == "单选模式" && $(head[i]).attr("class") == "active") {
						keyword = $("#singleDomain").val();
					} else if($(head[i]).text() == "多选模式" && $(head[i]).attr("class") == "active") {
						keyword = $("#multiDomain").val();
					}
				})
				if(!keyword) {
					return;
				} else {
					return keyword;
				}
			},
			//多选模式，域名全选按钮
			selectAll (e) {
				var checkLanguage = $("input[name='multiSufCatTag']:checked").attr('id');
				var checklist = "";
				if(checkLanguage == "en_radio") {
					checklist = $("#enDomain").find('input[name="multiSufName"]');
				} else {
					checklist = $("#zhDomain").find('input[name="multiSufName"]');
				}
				if(e.target.checked) {
					for(var i = 0; i < checklist.length; i++) {
						checklist[i].checked = 1;
					}
				} else {
					for(var j = 0; j < checklist.length; j++) {
						checklist[j].checked = 0;
					}
				}
			},
			load() {
				var keyword = getParam("keyword") || ''; //获取上一个页面输入的关键字
				keyword = keyword.trim();
				var com = getParam("com") || '';
				$("#singleDomain").val(keyword);
				//通过录入的关键字查询出相关域名信息列表
				this.getDomainSetting(com);
				/* 单选、多选模式切换 */
				var head = document.getElementById("tab-head").getElementsByTagName("a");
				var body = document.getElementById("tab-body").getElementsByTagName("section");
				for(var a = 0; a < head.length; a++) {
					head[a].index = a;
					head[a].onclick = function() {
						for(var j = 0; j < body.length; j++) {
							body[j].style.display = "none";
							head[j].className = "";
						}
						body[this.index].setAttribute('style', 'display:blcok');
						$(body[this.index]).removeClass("hidden");
						head[this.index].className = "active";
					}
				}
				/* 多选模式下的英文域名、中文域名tab切换 */
				$("input[name='multiSufCatTag']").each(function() {
					$(this).click(function() {
						var _id = $(this).attr('id');
						$("#all_check").removeAttr("checked");
						if(_id == "en_radio") {
							$('#enDomain').show();
							$('#zhDomain').hide();
						}
						if(_id == "cn_radio") {
							$('#enDomain').hide();
							$('#zhDomain').show();
						}
					});
				});
				/*单选模式，获取域名查询结果并展示*/
				$("#checkSingle").click(function() {
					this.checkDomain();
					this.getRecDomain();
				});
				//多选模式，获取域名查询结果并展示
				$("#checkMulti").click(function() {
					this.checkMulti();
					this.getRecDomain();
				});
				
				//域名推荐换一批
				$("a.random").on("click", this.getRecDomain);

				//初始化Cookie中的购物车对象
				var cookie = $.cookie('cartObj');
				if(cookie) {
					$.when(this.checkDomain(),
						this.getRecDomain()).done(
						this.initCart(cookie)
					);
				} else {
					this.checkDomain();
					this.getRecDomain();
					var cartObj = {
						domain: [],
						num: 0
					};
					$.cookie('cartObj', JSON.stringify(cartObj), {
						expires: 1,
						path: '/'
					});
				}
				//给加入清单绑定事件
				this.addEventList();
				//给清空购物车绑定事件
				$("#clearAllCart").on("click", this.clearCart);
				//给查看全部后缀添加绑定事件
				$("#checkUncheckedSingle").on("click", this.getOtherSuf);
				//添加全部可以查询出 可以购买的域名到 域名清单中
				$(".btn-add-all").click(this.addAll);
			}
		},
		mounted() {
			this.load();
		}
	}
</script>

<style scoped>
	.sch-box ul li {
		padding: 10px 0px;
	}
	
	.sch-box li:nth-child(even) {
		padding-left: 15px;
	}
</style>